<template>
  <div>
    <el-container>
      <el-header class='printlogo flexrow'>
        <div class="">
            <img src="@/assets/images/logo.png" alt="">
            <span>昌友税法查询系统</span>
        </div> 
        <div class="blank"></div>
        <div class="nav-back" @click="toPre">
          返回
          <i class='iconfont iconback01 printguan'></i>
        </div>
      </el-header>
      <el-main class="printmain">
        <!-- <print-list></print-list>     
        <print-doc></print-doc> -->
        <div>
          <div class="flexrow printtop">
            <div>
              <span class="save" @click="save">保存</span>
              <button v-print="'#printMe'">打印</button>
            </div>
            <div>查询总数：[<span>{{length}}/{{total}}</span>]</div>
            <div>
              <input type="text" v-model="search" name="search" @keyup.enter="onSearch" placeholder="请输入关键词进行搜索">
              <label for="search" @click="onSearch">结果中查找</label>
            </div>
          </div>
          <div>
            <el-table :data="tables" height="240" border highlight-current-row
              @row-click="getdata" 
              v-loading="loading" 
              ref="scrollbar"
            >
              <el-table-column prop="data_id" label="编号" width="60">
                <!-- <template slot-scope="scope">    
                            <span class="col-cont" v-html="showDate(scope.row.data_id)" ></span>
                        </template> -->
              </el-table-column>
              <el-table-column prop="title" label="标题" width="560" class='ellipsis'>
                <!-- <template slot-scope="scope">    
                            <span class="col-cont" v-html="showDate(scope.row.title)" ></span>
                        </template> -->
              </el-table-column>
              <el-table-column prop="doc_no" label="文号" width="200" class='ellipsis'>
                <!-- <template slot-scope="scope">    
                            <span class="col-cont" v-html="showDate(scope.row.doc_no)" ></span>
                        </template> -->
              </el-table-column>
               <el-table-column prop="status" label="状态" width="70">
                <!-- <template slot-scope="scope">    
                            <span class="col-cont" v-html="showDate(scope.row.status)" ></span>
                        </template> -->
              </el-table-column>
               <el-table-column prop="publish_date" label="发文日期">
                <!-- <template slot-scope="scope">    
                            <span class="col-cont" v-html="showDate(scope.row.publish_date)" ></span>
                        </template> -->
              </el-table-column>
            </el-table>            
          </div>
        </div>

        <div v-loading="loading">
          <div class="docbox" id="printMe" ref="savedoc">
            <div v-if="!nodata">
                <div class="title">{{document.title}}</div>
                <div class="subtitle">
                  <span>文号：<span>{{document.doc_no}}</span></span>
                  <span>状态：<span>{{document.status}}</span></span>
                  <span>发文日期：<span>{{document.publish_date}}</span></span>
                </div>
                <div class="docmain" v-html="content">

                </div>
                <div v-if="document.attachment1 || document.attachment2" class="content-attachments">
                  <div class="attach-label">附件：</div>
                  <div class="attach-content">
                    <a v-if="document.attachment1" :href="'http://app.yejianping.cn' + document.attachment1">{{document.attachment1_name || document.attachment1}}</a><br>
                    <a v-if="document.attachment2" :href="'http://app.yejianping.cn' + document.attachment2">{{document.attachment2_name || document.attachment2}}</a>
                  </div>
                </div>

            </div>

          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  // import PrintList from './print/PrintList'
  // import PrintDoc from './print/PrintDoc'
  import axios from 'axios'
  import storage from '../../storage/index'
  
  export default {
    name: 'Print',
    // components: { 
    //   PrintList,
    //   PrintDoc
    // }
     data() {
        return {
            search:'',
            total:0,
            tableData:[],
            document:{},
            content:'',
            loading:true,
            nodata:false,
            length:0,
            type:'',
            id:'',
            keyword:'',
            isSearch:false,
          }
      },
      computed:{
        tables() {
                // const search = this.search
                // if (search) {
                //     return this.tableData.filter(dataNews => {
                //         return Object.keys(dataNews).some(key => {
                //             return String(dataNews[key]).toLowerCase().indexOf(search) > -1
                //         })
                //     })
                // }
                return this.tableData
            }
      },
      methods:{
        initData(){
          this.id = this.$route.query.id 
          this.type = this.$route.query.param_type
          this.keyword = this.$route.query.serinput
        },
        toPre(){
          this.$router.go(-1);
        },
        getPrintList(keyword2){
            let id = this.id
            let limit = 20
            let offset = this.length
            if(keyword2==undefined){
              keyword2=""
            }
            if(id){
                let type = this.type
              if( type == 'year'){ 
                    let url = '/law/index?category=&vocation=&special=&policy=&keyword=&publish_date_start='+id+'-01-01&publish_date_end='+id+'-12-31 23:59:59&limit='+limit+'&offset='+offset+'&keyword2='+keyword2 
                  axios.get(url).then(this.getPrintListSucc)  
                }else if(type == 'vocation'){
                  let url = '/law/index?category=&vocation='+id+'&special=&policy=&keyword=&limit='+limit+'&offset='+offset+'&keyword2='+keyword2 
                  axios.get(url).then(this.getPrintListSucc)
                }else if(type == 'special'){
                  let url = '/law/index?category=&vocation=&special='+id+'&policy=&keyword=&limit='+limit+'&offset='+offset+'&keyword2='+keyword2 
                  axios.get(url).then(this.getPrintListSucc)
                }else if(type == 'polity'){
                  let url = '/law/index?category=&vocation=&special=&policy='+id+'&keyword=&limit='+limit+'&offset='+offset+'&keyword2='+keyword2 
                  axios.get(url).then(this.getPrintListSucc)
                }else{                 
                  let url = '/law/index?category='+id+'&vocation=&special=&policy=&keyword=&limit='+limit+'&offset='+offset+'&keyword2='+keyword2 
                  axios.get(url).then(this.getPrintListSucc)  
                }
                
          }else{
            let keyword = this.keyword
            if(keyword){
              var url = '/law/index?category=&vocation=&special=&policy=&keyword='+keyword+'&limit='+limit+'&offset='+offset+'&keyword2='+keyword2  
              axios.get(url).then(this.getPrintListSucc)
            }else{
              var url = '/law/index?category=&vocation=&special=&policy=&keyword=&limit='+limit+'&offset='+offset+'&keyword2='+keyword2  
                axios.get(url).then(this.getPrintListSucc)
            }
            
          }
            
        },
        getPrintListSucc(res){
          res = res.data
          console.log(res)
          if (res.status==200) {  
            const data = res.msg
            this.total = data.total
            this.tableData = this.tableData.concat(data.data)
            this.length= this.tableData.length
            if(data.total !== 0){
                let no = data.data[0].data_id
                //storage.set('docno',no)
                this.getPrintDoc(no)                  
            }else{
              this.nodata=true
              this.loading=false
            }
          }
        },
        getdata(row){
          let id = row.data_id
          console.log(id)
          //storage.set('docno',id)
          this.getPrintDoc(id)
          // 刷新页面
          // let NewPage = "_empty" + "?time=" + new Date().getTime() / 500;
          // this.$router.push(NewPage);
          // this.$router.go(-1);
        },
         // showDate(val) {
       //          val = val + '';
       //          if (val.indexOf(this.search) !== -1 && this.search !== '') {
       //              return val.replace(this.search, '<font color="#409EFF">' + this.search + '</font>')
       //          } else {
       //              return val
       //          }
       //      }
       getPrintDoc(id){
        //let id = storage.get('docno')
         console.log('getPrintDoc')
        let url = '/law/detail?id='+id
          axios.get(url).then((res)=>{
          res = res.data
          if (res.status==200) {           
            this.loading=false
            this.document = res.data
            this.content = res.data.content          
          }else{
            this.loading=false
            this.$message({
              dangerouslyUseHTMLString: true,
              message: '<p>' + res.msg + '</p>',
              center:true,
              offset:300,
              duration:3000,
              type: 'success'
            })
          }
        })          
        },
        save(){
          var a = document.createElement('a');
          var url = window.URL.createObjectURL(new Blob([this.gethtml()],
              { type: "text/plain;charset=utf-8"
            })
          );
          a.href = url;
          a.download = "file.html";
          a.click();
          window.URL.revokeObjectURL(url);
        },
        gethtml(){
          const template = this.$refs.savedoc.innerHTML;
          let html = `<!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width,initial-scale=1.0">
          <title>昌友税法查询系统</title>
          <link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" />
            
          </head>
          <body>
          <div class="resume_preview_page" style="margin:0 auto;width:1200px;font-size:16px;">
          ${template}
          </div>
          </body>
          </html>`;
          return html;
        },
        tablelistener(){  
          let that = this       
          let dom = that.$refs.scrollbar.bodyWrapper
          dom.addEventListener("scroll", function () {
            let scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
              if ( scrollDistance <= 0 ) {
                  if(that.length < that.total){
                    if(that.search){
                      that.getPrintList(that.search)
                    }else{
                      that.getPrintList()  
                    }                    
                  }                           
              }
          })       
        },
        onSearch(){
          if(!this.isSearch){
            const search = this.search
            this.tableData=[]
            this.length=0
            this.getPrintList(search)
            this.isSearch=true
          }
          setTimeout(this._serchange,1000)          
        },
        _serchange(){
          this.isSearch=false
        }
      },

      created(){
        this.initData()
        this.getPrintList() 
      },

      mounted () {          
        this.tablelistener()  
      },
      //组件更新才可以拿到Dom元素
      updated(){
        var a=document.querySelectorAll("a");
        if(a.length!==0){
          const shell = require('electron').shell
          for(let i=0;i<a.length;i++){
               a[i].onclick=function(e){
              e.preventDefault();
              let href=a[i].href;
              shell.openExternal(href);
            }
          }
        }
        
       
        //let elementList = document.querySelectorAll('.docmain a') 
        //     console.log(elementList)
        //     if(elementList.length!==0){
        //       elementList.forEach((item)=>{
        //         let href = item.href
        //         let html = item.outerHTML
        //         let text = item.innerHTML
        //         let str = '<a @click.prevent='+'openWeb(' + href + ') href="javascript:void(0)" >'+text+'</a>'
        //         //let str = "<a @click.prevent='openWeb' href='javascript:void(0)'>点击</a>"
        //         item.outerHTML=str              
        //       })
              
          
        //     }


        // this.$nextTick(function(){
        //     elementList[0].click()
        // })
            // elementList[0].click(function(){
            //   console.log('1')
            
            // })
          
        // const shell = require('electron').shell
        //   shell.openExternal('http://www.yejianping.cn/')
      }
  }
</script>

<style scoped>
.content-attachments {
  padding: 20px;
  background: #FFF;
}
.content-attachments .attach-label {
    display: inline-block;
  }
.content-attachments .attach-content {
  display: inline-block;
}
.content-attachments .attach-content  a {
      color: #0a6aa1;
}

.el-header.printlogo{
  height: 30px !important;
  background: #BEE4F1;
  line-height: 30px;
  justify-content: between;
  position: relative;
}
/*.printlogo a{
  color: #000;
}*/
.printlogo img{
  width: 28px;
  margin-right: 10px; 
  margin-top:5px;
  margin-left: 5px;
}

.printlogo span{
  position: absolute;
  top:0px;
  left:40px;
}
.el-main.printmain{
  padding:10px;
  height: 696px!important;
}
.nav-back {
  font-size: 14px;
  font-weight: 700;
  color: #0a6aa1;
}
.printguan{
  font-weight: 100;
  font-size: 20px;
  width: 20px;
  height: 20px;
  text-align: center;
 line-height: 20px;
  vertical-align: middle;
/* position: absolute;
 right:10px;
 bottom:0px;*/
 margin-right: 15px;
 cursor: pointer;
}
.printguan:hover{
  background: red;
}

.printtop{
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 14px;
  }
  .save{
    cursor: pointer;
  }
  .docbox{
    height: 398px;
    overflow: auto;
    border-top:2px solid #A3C7E2;
  }
  .title{
    text-align: center;
    font-size: 20px;
    color: #FF0000;
    font-weight: 800;
    margin:5px 0 30px 0;
  }
  .subtitle{
    text-align: center;
    margin-bottom: 20px;
  }
  .docmain{
    border-top:1px dashed #000;
    padding: 20px;
    background: #FFFFFF;
  }

  .docmain >>> a {
    color: #0a6aa1;
  }

</style>
